import React, { Component } from "react";
import PropTypes from "prop-types";
import autobind from "autobind-decorator";

// components
import CardHeader from "../../components/CardHeader/index";


import Chart from "./chart"

export default class TabPane extends Component {
    constructor(props) {
        super(props);

    }
    @autobind
    analysisType(entry, dismission) {
        const { active } = this.props;
        if (active === 'dismission') {
            return dismission;
        } else {
            return entry;
        }
    }
    render() {
        const { active, toggleActive, analysisData } = this.props;
        const { deptEntry = [],
            deptDismission = [],
            entryWithAge = [],
            dismissionWithAge = [],
            entryWithType = [],
            dismissionWithType = [],
            dismissionWithLeaveReason = [],
            dismissionWithOurAge = [],
            dismissionWithEdu = []
        } = analysisData;
        // const dept = this.analysisType(deptEntry, deptDismission);
        const type = this.analysisType(entryWithType, dismissionWithType);
        const age = this.analysisType(entryWithAge, dismissionWithAge);
        return (
            <div className="tabs-pane">
                <div className="tabs">
                    <div className={`tabs-item ${active === 'entry' ? 'active' : ''}`}
                        onClick={() => {
                            window._rlog(`_weekly_entryTabs`);
                            toggleActive('entry')
                        }}
                    >
                        入职分析
                    </div>
                    <div className={`tabs-item ${active === 'dismission' ? 'active' : ''}`}
                        onClick={() => {
                            window._rlog(`_weekly_dismissionTabs`);
                            toggleActive('dismission')
                        }}
                    >
                        离职分析
                    </div>

                    <div className="bottom-line" style={{
                        left: `${active === 'dismission' ? 50 : 0}%`
                    }}></div>
                </div>

                <div className="pane">
                    {
                        active === 'entry' &&
                            <div className="dept-entry">
                                <CardHeader title={'部门分布'} />
                                {
                                    deptEntry.length > 0 ?
                                        <Chart chartData={deptEntry} type={'stack'} key={'entry'} /> :
                                        <span className="data-null">
                                            无下级部门<br />
                                            无法生成部门分布报表
                                        </span>
                                }
                            </div> 
                    }
                    {
                        active === 'dismission' &&
                            <div className="dept-dismission">
                                <CardHeader title={'部门分布'} />
                                {
                                    deptDismission.length > 0 ?
                                        <Chart chartData={deptDismission} type={'stack'} key={'dismission'} /> :
                                        <span className="data-null">
                                            无下级部门<br />
                                            无法生成部门分布报表
                                        </span>
                                }
                            </div>
                    }

                    <div className="type">
                        <CardHeader title={'员工类型分布'} />
                        {
                            type.length > 0 ?
                                <Chart chartData={type} /> :
                                <span className="data-null">
                                    暂无数据
                                </span>
                        }
                    </div>

                    <div className="age">
                        <CardHeader title={'年龄分布'} />
                        {
                            age.length > 0 ?
                                <Chart chartData={age} /> :
                                <span className="data-null">
                                    暂无数据
                                </span>
                        }
                    </div>
                    {
                        active === 'dismission' &&
                        <div>
                            <div className="leave-reason">
                                <CardHeader title={'离职原因'} />
                                {
                                    dismissionWithLeaveReason.length > 0 ?
                                        <Chart chartData={dismissionWithLeaveReason} /> :
                                        <span className="data-null">
                                            暂无数据
                                        </span>
                                }
                            </div>

                            <div className="our-age">
                                <CardHeader title={'司龄分布'} />
                                {
                                    dismissionWithOurAge.length > 0 ?
                                        <Chart chartData={dismissionWithOurAge} /> :
                                        <span className="data-null">
                                            暂无数据
                                        </span>
                                }
                            </div>

                            <div className="edu">
                                <CardHeader title={'学历分布'} />
                                {
                                    dismissionWithEdu.length > 0 ?
                                        <Chart chartData={dismissionWithEdu} /> :
                                        <span className="data-null">
                                            暂无数据
                                        </span>
                                }
                            </div>
                        </div>
                    }
                </div>
            </div>
        );
    }
}
TabPane.propTypes = {
    analysisData: PropTypes.object,
    active: PropTypes.string,
};
